import React from "react";
import { FlatList, StyleSheet, Text } from "react-native";
import { TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import BasePage from "../BasePage";
import ListSeparator from "../common/ListSeparator";
import ListEmpty from "../common/ListEmpty";
import NavigationBar from "../common/NavigationBar";
import ViewUtils from "../../utils/ViewUtils";
import DateFilter from "../components/DateFilter";
import LabelStarRating from "../components/LabelStarRating";
import moment from "moment";

/**
 * 我的评分
 */
export default class MyScore extends BasePage {

  constructor(props) {
    super(props);
    this.pageNo = 1;
    this.pageSize = 15;
    this.totalPages = 0;
    this.isLoading = false;
    this.isFirst = true;
    let startOfWeek = moment().startOf("week");
    let endOfWeek = moment().endOf("week");
    let start = (moment(startOfWeek).format("YYYY-MM-DD"));
    let end = (moment(endOfWeek).format("YYYY-MM-DD"));
    this.state = {
      isRefreshing: false,
      showFoot: 0,
      showEmpty: false,
      dataList: [],
      delyStartTime: start,
      delyEndTimeEnd: end,
      avgScore:0,
    };
  }

  componentDidMount() {
    super.componentDidMount();
    this.loadData();
  }

  loadData=(showLoading = true) =>{
    const { dataList, delyStartTime, delyEndTimeEnd } = this.state;
    this.isLoading = true;
    let params = {
      // pageNum: this.pageNo,
      // pageSize: this.pageSize,
      token: global.token,
      delyStartTime: `${delyStartTime} 00:00:00`,
      delyEndTimeEnd: `${delyEndTimeEnd} 23:59:59`,
      showLoading,
    };
    axios.get(api.listMyScore, { params })
      .then(res => {
        this.isLoading = false;
        this.setState({
          dataList: res.list,
          avgScore:res.avgScore||0,
          isRefreshing: false,
          showEmpty: IsNullOrEmpty(res.list),
        });
      })
      .catch(e => {
        logger("error", e);
        this.isLoading = false;
        this.setState({
          isRefreshing: false,
          showEmpty: true,
        });
      });
  }

  // 下拉刷新
  _renderRefresh = (isRefreshing = true) => {
    // 不处于 下拉刷新
    if (this.isLoading === false && !this.state.isRefreshing) {
      this.setState({
        isRefreshing,
      });
      this.pageNo = 1;
      this.totalPages = 0;
      this.loadData();
    }
  };

  render_item = ({ item, index }) => {
    return (
      <View style={styles.item}>
        <View center style={{ width: "27%" }}>
          <Text style={commonStyles.text_black_13}>{item?.xmbz_no}</Text>
        </View>
        <View center style={{ width: "15%" }}>
          <Text style={commonStyles.text_black_13}>{item?.score}</Text>
        </View>
        <View left  style={{ width: "58%" }}>
          <Text style={commonStyles.text_black_13}>{item?.remarks}</Text>
        </View>
      </View>
    );
  };

  renderHeader = () => {
    const {avgScore}=this.state;
    let score=parseFloat(Number(avgScore)/100)*5
    logger('分数',score)
    return (
      <View marginH-15>
        <View row centerV spread>
          <Text style={commonStyles.text_black}>您的综合评分为<Text style={{ color: "#000000" }}>{avgScore}分</Text></Text>
          <LabelStarRating
            star={score}
            disabled={true}
            style={{ marginLeft: 8 }} />
        </View>
        <View style={styles.titleWrap}>
          <View center style={{ width: "27%" }}>
            <Text style={commonStyles.text_black_13}>订单号</Text>
          </View>
          <View center style={{ width: "15%" }}>
            <Text style={commonStyles.text_black_13}>评分</Text>
          </View>
          <View center style={{ width: "58%" }}>
            <Text style={commonStyles.text_black_13}>评价内容</Text>
          </View>
        </View>
      </View>
    );
  };


  render() {
    const { dataList, isRefreshing, } = this.state;
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"我的评分"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <View row centerV>
          <DateFilter defaultType={1} onQueryClick={(delyStartTime, delyEndTimeEnd) => this.setState({
            delyStartTime,
            delyEndTimeEnd,
          }, () => this._renderRefresh(false))} />
            <TouchableOpacity activeOpacity={1} throttleTime={1000} style={styles.btn} onPress={()=>this._renderRefresh(false)}>
              <Text style={commonStyles.text_black}>刷新</Text>
            </TouchableOpacity>
          </View>
          <FlatList
            data={dataList}
            onRefresh={this._renderRefresh}
            showsVerticalScrollIndicator={false}
            refreshing={isRefreshing}
            extraData={this.state}
            style={{}}
            contentContainerStyle={{ flexGrow: 1 }}
            keyExtractor={(item, index) => "menu_" + index}
            renderItem={this.render_item}
            ItemSeparatorComponent={() => <ListSeparator height={0.5} backgroundColor={"#F7F7F7"} />}
            ListEmptyComponent={() => <ListEmpty showEmpty={this.state.showEmpty} />}
            ListHeaderComponent={this.renderHeader}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  titleWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: "#F9D63B",
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginTop: 15,
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    marginHorizontal: 15,
    backgroundColor: "white",
  },
  btn: {
    width: 80,
    height: 40,
    ...commonStyles.center,
    backgroundColor: "#F9D63B",
    borderRadius: 5,
  },
});
